<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';

export default {
  name: 'count_component',
  data() {
    return {
      number: 1,
    }
  },
  methods: {

    ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}),
    ...mapActions(['incrementIfOdd', 'incrementSecondLater'])
  },
  computed: {
    ...mapState(['sum', 'personList']),
    ...mapGetters(['afterComputed'])
  }
}
</script>

<template>
  <div class="count_component">
    <h1>当前总和为{{ sum }}</h1>
    <h1>加工后{{ afterComputed }}</h1>
    <div class="line">
      <!-- v-model.number 直接将接收到的参数转化为数字 -->
      <select v-model.number="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="increment(number)">+</button>
      <button @click="decrement(number)">-</button>
      <button @click="incrementIfOdd(number)">总数为奇数执行加运算</button>
      <button @click="incrementSecondLater(number)">1s后执行加运算</button>
      <br>
    </div>
    <h3 style="color: #59b2ee">Person组件的人数{{ personList.length }} </h3>
  </div>
</template>

<style scoped>
.line {
  display: flex;
}

select {
  width: 40px;
  margin-right: 10px;
}

button {
  margin-right: 10px;
}
</style>